
import 'package:flutter/material.dart';
import 'package:ymApp/public.dart';

class SearchPage extends StatefulWidget {
  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        padding: EdgeInsets.symmetric(vertical: 40.rpx, horizontal: 20.rpx),
        child: Column(
          children: [
            SearchBar(),
            hotSearchBuild(),
          ],
        ),
      )
    );
  }

  Widget hotSearchBuild() {
    return Container(
      width: double.infinity,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('热搜',style: TextStyle(fontWeight: FontWeight.bold,fontSize: 28.rpx,)),
          SizedBox(height: 20.rpx,),
          Wrap(
            children: List.generate(10, (index) {
              return Container(
                padding: EdgeInsets.symmetric(vertical: 10.rpx),
                width: 350.rpx,
                child: Row(
                  children: [
                    Container(
                      width: 60.rpx,
                      alignment: Alignment.center,
                      child: Text('${index+1}',style: TextStyle(fontWeight: FontWeight.w600,fontSize: 26.rpx),),
                    ),
                    Text('七夕青瓜',style: TextStyle(fontWeight: FontWeight.w600,fontSize: 26.rpx),),
                    SizedBox(width: 20.rpx,),
                    Container(
                      width: 40.rpx,
                      height: 40.rpx,
                      alignment: Alignment.center,
                      child: Text('热',style: TextStyle(color: Colors.white,fontSize: 22.rpx),),
                      decoration: BoxDecoration(
                        color: Colors.orange,
                        borderRadius: BorderRadius.all(Radius.circular(4.rpx))
                      ),
                    )
                  ],
                ),
              );
            })
          )
        ],
      ),
    );
  }

}

class SearchBar extends StatelessWidget implements PreferredSizeWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 140.rpx,
      padding: EdgeInsets.symmetric(horizontal: 30.rpx,vertical: 20.rpx),
      child: SafeArea(
        child: Row(
          children: [
            Expanded(
              child: Container(
                height: 80.rpx,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(100)),
                  color: Colors.black12,
                ),
                padding: EdgeInsets.symmetric(horizontal: 20.rpx),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Padding(
                      padding: EdgeInsets.only(top: 10.rpx),
                      child: Icon(Icons.search,color: Colors.black45,size: 40.rpx,),
                    ),
                    SizedBox(width: 20.rpx,),
                    Expanded(
                      child: Container(
                        width: 300.rpx,
                        child: TextField(
                          style: TextStyle(fontSize: 26.rpx),
                          autofocus: true,
                          textInputAction: TextInputAction.search,
                          decoration: InputDecoration(
                            hintText: '黑神话悟空',
                            //设置输入框前面有一个电话的按钮 suffixIcon
                            labelStyle: TextStyle(
                              fontSize: 20.rpx,
                              color: Colors.grey,
                            ),
                            focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide.none
                            ),
                            contentPadding: EdgeInsets.only(bottom: 0.rpx)
                          ),
                          onChanged: (e){
                            print(e);
                          },
                        )
                        ,
                      )
                      ,
                    )
                  ],
                ),
              ),
            ),
            GestureDetector(
              child: Container(
                width: 100.rpx,
                alignment: Alignment.centerRight,
                child: Text(
                  '取消',
                  style: TextStyle(fontSize: 26.rpx,color: Colors.black),
                ),
              ),
              onTap: (){
                Navigator.pop(context);
              },
            )
          ],
        ),
      ),
    );
  }

  @override
  // TODO: implement preferredSize
  Size get preferredSize => Size.fromHeight(88);
}
